<template>
	<view>
		<view class="top_nav_box">
			<navigation-custom :config="config" @customConduct="customConduct" />
		</view>
		<view class="order_top_tip" :style="{top:statusHeight+'px'}">
			取送路线示意，非导航规划，请遵守交规
		</view>
		<view class="event-help-details">
			<!-- <view class="back-last-page" :style="'top: ' + navTabtop + 'px'" @click="goBackPage">
				<u-icon name="arrow-left" color="#030303" size="20"></u-icon>
			</view> -->
			<view class="map-content" :style="'height:' + mapHeight + 'px'">
				<!-- <map class="map-gis" id="mapGis" ref="mapGis" :show-scale="true" :enable-poi="true"
					:show-location="false" :enable-building="true" :enable-3D="true" :enable-rotate="true"
					:enable-indoorMap="true" :scale="mapObj.scale" :longitude="mapObj.longitude"
					:latitude="mapObj.latitude" :markers="mapMarkers"></map> -->
				<map id="map" class="map-gis" :latitude="latitude" :longitude="longitude" :markers="covers"
					:enable-building="true" :enable-traffic="true" :show-location="true" :polyline="polyline" :scale="scale" enable-3D="true"></map>
			</view>
			<movable-area class="move-content" @touchmove.stop>
				<movable-view class="move-incontent" :style="'height:' + movableHeight + 'px'" :y="initY" inertia
					:damping="10" :friction="1" direction="vertical" :animation="false" @change="movableChange"
					@touchend="touchEnd">
					<view class="move-drag-ico" @click.stop="openHide">
						<image class="drag-img" :class="{'drag-transform':drageIco == 'up'}"
							src="https://www.cccshansong.com/chong_weapp/map_top_icon.png"
							mode=""></image>
					</view>
					<view class="move-infos-body" style="height: calc(100% - 100rpx);">
						<scroll-view style="height: 100%;" :scroll-y="initY == canDragTop">
							<view class="order_content_box">
								<view class="scroll_item_order_top_box">
									<view class="scroll_item_order_top_time">
										<image src="https://www.cccshansong.com/chong_weapp/time_icon.png" mode=""></image>7月05日 17:00
									</view>
									<view class="scroll_item_order_top_price">
										<view class="scroll_item_order_top_price_tip">含天气奖励¥1.5</view>
										<view class="scroll_item_order_top_price_num">
											<text>¥</text>9.9
										</view>	
									</view>
								</view>	
								<view class="scroll_item_order_center_box">
									<view class="qu_address_item_box">
										<view class="qu_address_item_left_box">
											<view class="qu_address_icon_box">
												<image src="https://www.cccshansong.com/chong_weapp/qu_icon.png" mode="" style="margin-top: 10rpx;"></image>
											</view>
											<view class="qu_address_box">
												<view class="qu_address_title">俏淮娘方便面炒鸡</view>
												<view class="qu_address_desc">沂蒙路九州购物广场沂蒙路九州购物广场沂蒙路九州购物广场沂蒙路九州购物广场沂蒙路九州购物广场档位B-02号</view>	
											</view>
										</view>
										<view class="dh_icon_box">
											<image src="https://www.cccshansong.com/chong_weapp/dh_icon.png" mode=""></image>
										</view>
									</view>
									<view class="qu_address_item_box" style="margin-top: 36rpx;">
										<view class="qu_address_item_left_box">
											<view class="qu_address_icon_box">
												<image src="https://www.cccshansong.com/chong_weapp/song_icon.png" mode="" style="margin-top: 10rpx;"></image>
											</view>
											<view class="qu_address_box">
												<view class="qu_address_title">俏淮娘方便面炒鸡</view>
												<view class="qu_address_desc">沂蒙路九州购物广场沂蒙路九州购物广场沂蒙路九州购物广场沂蒙路九州购物广场沂蒙路九州购物广场档位B-02号</view>	
											</view>
										</view>
										<view class="dh_icon_box">
											<image src="https://www.cccshansong.com/chong_weapp/dh_icon.png" mode=""></image>
										</view>
									</view>
									<view class="scroll_item_order_status_box">
										<view class="scroll_item_order_status_phone">
											林(先生):138****<text>9918</text> <image src="https://www.cccshansong.com/chong_weapp/phone_icon.png" mode=""></image>
										</view>
										<view class="scroll_item_order_status">外卖配送</view>
									</view>
									<view class="scroll_item_order_remark_box">
										<text>备注：</text>货物易碎，请小心配送，谢谢！货物易碎，请小心配送，谢谢！货物易碎，请小心配送，谢谢！货物易碎，请小心配送，谢谢！货物易碎，请小心配送，谢谢！
									</view>
								</view>
								
							</view>
							<view class="order_content_box_heng"></view> 
							<view class="order_content_box">
								<view class="order_content_title">
									<view class="order_content_title_xian"></view>
									<view class="order_content_title_text">商品信息</view>	
								</view>
								<view class="order_content_info_item_box">
									<view class="order_content_info_item_box_left">随心搭六件套</view>
									<view class="order_content_info_item_box_right">¥25.9</view>
								</view>
								<view class="order_content_info_item_box">
									<view class="order_content_info_item_box_left">实付</view>
									<view class="order_content_info_item_box_right">¥25.9</view>
								</view>
							</view>	
							<view class="order_content_box_heng"></view>
							<view class="order_content_box">
								<view class="order_content_title">
									<view class="order_content_title_xian"></view>
									<view class="order_content_title_text">订单信息</view>	
								</view>
								<view class="order_content_info_item_box">
									<view class="order_content_info_item_box_left">订单类型</view>
									<view class="order_content_info_item_box_right">订单包，共1单</view>
								</view>
								<view class="order_content_info_item_box">
									<view class="order_content_info_item_box_left">订单号码</view>
									<view class="order_content_info_item_box_right">2071 1460 7044 2055 880<view class="order_content_info_item_box_right_copy">复制</view></view>
								</view>
								<view class="order_content_info_item_box">
									<view class="order_content_info_item_box_left">期望送达</view>
									<view class="order_content_info_item_box_right">2024-07-05 12:00:00</view>
								</view>
							</view>	
							<view class="order_content_box_heng"></view>
							<view class="order_content_box">
								<view class="order_content_title_box">
									<view class="order_content_title">
										<view class="order_content_title_xian"></view>
										<view class="order_content_title_text">订单信息</view>	
									</view>
									<view class="order_content_title_rule">
										<image src="https://www.cccshansong.com/chong_weapp/order_detail_icon3.png" mode=""></image>结算细则
									</view>
								</view>
								<view class="order_content_title_tip">未包含参与活动的奖励</view>
								<view class="order_content_info_item_box">
									<view class="order_content_info_item_box_left">配送费</view>
									<view class="order_content_info_item_box_right">¥9.9</view>
								</view>	
								<view class="order_content_info_item_box">
									<view class="order_content_info_item_box_left">合计</view>
									<view class="order_content_info_item_box_right"><text>¥9.9</text></view> 
								</view>	
							</view>
							<view class="order_content_box_heng"></view>
							<view class="order_content_box">
								<view class="order_content_title_box">
									<view class="order_content_title">
										<view class="order_content_title_xian"></view>
										<view class="order_content_title_text">要求送达 </view>	
									</view>
									<view class="order_content_title_rule1">
										12:00前
									</view>
								</view>
								<view class="order_content_time_box">
									<view class="order_content_time_item_box">
										<view class="order_content_time_item_time">11:00</view>
										<view class="order_content_time_item_name">下单</view>
									</view>
									<view class="order_content_time_item_box">
										<view class="order_content_time_item_time">11:00</view>
										<view class="order_content_time_item_name">接单</view>
									</view>
									<view class="order_content_time_item_box">
										<view class="order_content_time_item_time">11:00</view>
										<view class="order_content_time_item_name">派单</view>
									</view>
									<view class="order_content_time_item_box">
										<view class="order_content_time_item_time">11:00</view>
										<view class="order_content_time_item_name">送达</view>
									</view>
								</view>
							</view>
							<view  style="height:180rpx;"></view>
						</scroll-view> 

					</view>

					<!-- <video src="https://grid.wanhi.com.cn:65417/file/1650703977267/grid/eventhelp/20220623/1539819981196234754.mp4"></video> -->
				</movable-view>
			</movable-area>
		</view>
		<view class="fix_kf_box" @click="handleShowKf()">
			<image src="https://www.cccshansong.com/chong_weapp/order_detail_icon4.png" mode=""></image><text>客服</text>
		</view>
		<view class="fix_detail_box">
			<view class="scroll_item_order_btn3" hover-class="hover_class">
				<image src="https://www.cccshansong.com/chong_weapp/order_detail_icon1.png" mode=""></image><text>联系</text>
			</view>
			<view class="scroll_item_order_btn5" hover-class="hover_class" @click.stop="handleGrab()">我已送达</view>	
		</view>
		<wyb-popup ref="kfPopup" type="center" height="364" width='640' radius="16" :zIndex='999999'  :showCloseIcon="false" >
			<view class="kfPopup_content">
				<view class="kf_btn_title">提示</view>
				<view class="kf_btn_title1">请任意选择一种方式联系客服</view>
				<view class="kf_btn_box">
					<view class="kf_btn1" @click="handleKfCall()">电话客服</view>
					<view class="kf_btn2">微信客服
						<button class="leftBox" type="default" plain="true" open-type="contact" @contact="handleKfWx()">
						    打开客服会话
						</button>
					</view>
				</view>
			</view>
		</wyb-popup>
	</view>
</template>

<script>
	import navigationCustom from "@/components/struggler-navigationCustom/navigation-custom.vue"
	import wybPopup from '@/components/wyb-popup/wyb-popup.vue';
	export default {
		components: {
			wybPopup,
			navigationCustom,
		},
		data() {
			return {
				covers: [], //存放标记点数组
				location_address: '',
				distance: '',
				cost: '',
				polyline: [],
				scale: 14,
				latitude: 35.106909,
				longitude:  118.355317,
				currentHeight: 0, // 滑动组件当前高度
				scrollViewHeight: 0, //用于计算滚动区域高度
				map: null, 
				// 屏幕高度
				screenHeight: 667,
				statusHeight: 0,
				config: {
					title: "", //title
					bgcolor: "transparent", //背景颜色
					fontcolor: "#303133", //文字颜色，默认白色
					type: 4, //type 1，3胶囊 2，4无胶囊模式
					transparent: false, //是否背景透明 默认白色
					linear: false, //是为开启下滑渐变
					share: false, //是否将主页按钮显示为分享按钮
					menuIcon: "../../static/icon/back3.png", //当type为3或者4的时候左边的icon文件位置，注意位置与当前页面不一样
					// menuText:"返回", //当type为3或4的时候icon右边的文字
				},
				navTabtop: 20,

				mapObj: {
					longitude: 121.373219,
					latitude: 31.23378,
					scale: 16
				},
				mapMarkers: [{
					id: 123132,
					longitude: 121.373219,
					latitude: 31.23378,
					iconPath: 'https://www.cccshansong.com/chong_weapp/map_qu_icon1.png',
					width: 40,
					height: 40
				}],
				// page
				windowHeight: 1000,
				mapHeight: 140,
				cHeightNum: 0,
				movableHeight: 1000,
				canDragTop: 0,
				initY: 0,
				dragY: 0, 
				drageIco: 'down'
			};
		},
		onLoad() {
			let menuButton = uni.getMenuButtonBoundingClientRect();
			this.navTabtop = menuButton.top;
			console.log('==============', menuButton);
			this.windowHeight = uni.getSystemInfoSync().windowHeight

			this.mapHeight = this.windowHeight - 140;
			this.movableHeight = this.windowHeight - 150
			console.log(this.movableHeight)
			this.cHeightNum = this.windowHeight - 140;
			this.initY = -(this.windowHeight - 150 - 140);
			this.canDragTop = -(this.windowHeight - 150 - 140)

			this.dragY = 0
			this.initY = 0
			var a = this
			const res = wx.getMenuButtonBoundingClientRect()
			const statusHeight = res.top //胶囊距离顶部
			const navHeight = res.height //胶囊高度
			a.statusHeight = statusHeight + 5
			a.getLocation()
		},
		methods: {
			customConduct() {
				uni.navigateBack({
					delta: 1
				})
			},
			handleKfWx(){
				var a = this
				a.$refs.kfPopup.hide();
			},
			handleKfCall(){
				var a = this
				a.$refs.kfPopup.hide();
				uni.makePhoneCall({
					phoneNumber: '17865953562',
					// 成功回调
					success: (res) => {
						console.log('调用成功!')	
					},
					// 失败回调
					fail: (res) => {
						console.log('调用失败!')
					}    
				});
			},
			handleShowKf(){  
				var a = this
				a.$refs.kfPopup.show();
			},
			setScrollHeight(val) { // 实时返回的滑动组件高度
				this.currentHeight = val
			},
			setScrollViewHeight(val) { //最大高度
				this.scrollViewHeight = val
			},
			getLocation() {
				let that = this;
				uni.getLocation({
					type: 'gcj02',
					success: (res) => {
						console.log(res)
						// that.latitude = res.latitude;
						// that.longitude = res.longitude;
						that.latitude =  35.106909;
						that.longitude = 118.355317;
						that.covers = []
						that.setCovers()
						that.getRide()
					},
			
				})
			},
			setCovers(latitude, longitude) {
				let that = this;
			
				var iconPath = 'https://www.cccshansong.com/chong_weapp/map_qu_icon1.png'
				var iconPath1 = 'https://www.cccshansong.com/chong_weapp/map_song_icon1.png'
				var temp_marker = {
					iconPath: iconPath,
					id: 0,
					name: '万达广场',
					latitude: 35.106909,
					longitude: 118.355317,
					width: 26,
					height: 43,
					label: null,
					callout: {
						content: '东方家园',
						color: '#000000',
						fontSize: 9,
						borderRadius: 30,
						bgColor: '#ffffff',
						padding: 5
					}
			
				}
				var temp_marker1 = {
					iconPath: iconPath1,
					id: 1,
					name: '东方购物',
					latitude: 35.114109,
					longitude: 118.343367,
					width: 26,
					height: 43,
					label: null,
					callout: {
						content: '东方购物',
						color: '#000000',
						fontSize: 9,
						borderRadius: 30,
						bgColor: '#ffffff',
						padding: 5
					}
			
				}
				that.covers.push(temp_marker)
				that.covers.push(temp_marker1)
			},
			getRide() {
				var that = this
				that.myAmapFun.getRidingRoute({
					origin: '118.343367,35.114109', // start
					destination: '118.355317,35.106909', // end
					success: function(data) {
						// 路线规划
						var points = [];
						if (data.paths && data.paths[0] && data.paths[0].rides) {
							var steps = data.paths[0].rides;
							for (var i = 0; i < steps.length; i++) {
								var poLen = steps[i].polyline.split(';');
								for (var j = 0; j < poLen.length; j++) {
									points.push({
										longitude: parseFloat(poLen[j].split(',')[0]),
										latitude: parseFloat(poLen[j].split(',')[1])
									})
								}
							}
						}
						// 直线
						var points1 = [
							{
								latitude:35.114109,
								longitude: 118.343367,
							},
							{
								latitude: 35.106909,
								longitude: 118.355317,
							}
						];
						that.polyline = [{
							points: points,
							color: "#03D6D6",
							dottedLine: false,
							arrowLine: true,
							width: 6
						}]
						
						console.log('---', that.polyline)
					},
					fail: function(info) {
			
					}
				})
			},
			goBackPage() {
				uni.navigateBack({
					delta: 1
				});
			},
			// S 移动拖拽
			movableChange(e) {
				let y = e.detail.y;
				this.dragY = y
				let c_h = this.cHeightNum + y;
				if (c_h >= 150) {
					this.mapHeight = c_h;
				}
				if (y > (-100)) {
					this.drageIco = 'down'
				} else {
					this.drageIco = 'up'
				}
			},
			touchEnd(e) {
				this.initY = this.dragY
				setTimeout(() => {
					if (this.dragY > (-100)) {
						this.initY = 0

					} else { 
						this.initY = -(this.windowHeight - 150 - 140);
					}
				}, 100)

			},
			openHide() {
				if (this.drageIco == 'up') {
					this.initY = 0
				} else {
					this.initY = -(this.windowHeight - 150 - 140);
				}
			},
		}
	}
</script>

<style lang="scss">
	.top_nav_box {
		position: absolute;
		top: 0;
		left: 0;
		z-index: 10;	
	}
	.order_top_tip{
		position: absolute;
		left:88rpx;
		top: 0;
		z-index: 999;
		width: 458rpx;
		height: 40rpx;
		background-color: rgba(246, 233, 226, 1);
		border: 2rpx solid rgba(255, 107, 0, 0.1);
		border-radius: 10rpx;
		text-align: center;
		line-height: 40rpx;
		color: rgba(36, 40, 49, 1);
		font-size: 24rpx;
	}
	.event-help-details {
		width: 100%;
		height: 100vh;
		display: flex;
		flex-direction: column;
		position: relative;
	}

	.back-last-page {
		width: 60rpx;
		height: 60rpx;
		position: fixed;
		left: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 999999;
	}

	.map-content {
		width: 100%;
		background-color: #eee;
		position: absolute;
		top: 0;
		left: 0;

		.map-gis {
			width: 100%;
			height: 100%;
		}
	}

	// S 滑动块
	.move-content {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 680rpx;
	}

	.move-incontent {
		width: 100%;
		background-color: #fff;
		border-radius: 32rpx 32rpx 0 0;
	}

	.move-drag-ico {
		width: 100%;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;

		.drag-img {
			width: 50rpx;
			height: 22rpx;
			transition: all .3s;
		}

		.drag-transform {
			transform: rotate(-180deg);
		}
	}

	// 滚动内容
	.move-infos-body {}
	.fix_kf_box{
		position: fixed;
		z-index: 999997;
		right: 24rpx;
		bottom: 300rpx;
		width: 88rpx;
		height: 88rpx;
		border-radius: 50%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background-color: #fff;
		box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.1); 
		image{ 
			width: 40rpx;
			height: 40rpx;
		}
		text{
			color: rgba(36, 40, 49, 1);
			font-size: 20rpx;
		}
	}
	.order_content_box_heng{
		background-color: rgba(235, 238, 245, 1);
		width: 750rpx;
		height: 2rpx;
		margin: 24rpx 0;
	}
	.order_content_box{
		width: 686rpx;
		margin: 0 auto;
		.order_content_time_box{
			display: flex;
			align-items: center;
			justify-content: center;
			padding-top: 20rpx;
			.order_content_time_item_box{
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				padding: 0 42rpx;
				.order_content_time_item_time{
					color: rgba(36, 40, 49, 1);
					font-size: 32rpx;
					font-weight: 600;
				}
				.order_content_time_item_name{
					color: rgba(36, 40, 49, 1);
					font-size: 28rpx;
					font-weight: 600;
				}
			}
		}
		.order_content_title_tip{
			color: rgba(144, 147, 153, 1);
			font-size: 28rpx;
			margin-left:20rpx;
			padding-bottom: 24rpx;
		}
		
		.order_content_title_box{
			display: flex;
			align-items: center;
			justify-content: space-between;
			.order_content_title_rule1{
				color: rgba(36, 40, 49, 1);
				font-size: 32rpx;
				font-weight: 600;
			}
			.order_content_title_rule{
				display: flex;
				align-items: center;
				color: rgba(36, 40, 49, 1);
				font-size: 28rpx;
				image{
					margin-right: 10rpx;
					width: 28rpx;
					height: 28rpx;
				}
			}
			.order_content_title{
				display: flex;
				align-items: center;
				margin-bottom: 20rpx;
				.order_content_title_xian{
					width: 2rpx;
					height: 36rpx;
					background-color: rgba(255, 107, 0, 1);
				}
				.order_content_title_text{
					font-weight: 600;
					color: rgba(36, 40, 49, 1);
					font-size: 36rpx;
					margin-left:14rpx ;
				}
			}
			
		}
		.order_content_title{
			display: flex;
			align-items: center;
			margin-bottom: 20rpx;
			.order_content_title_xian{
				width:4rpx;
				height: 36rpx;
				background-color: rgba(255, 107, 0, 1);
			}
			.order_content_title_text{
				font-weight: 600;
				color: rgba(36, 40, 49, 1);
				font-size: 36rpx;
				margin-left:14rpx ;
			}
		}
		.order_content_info_item_box{
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-bottom: 20rpx;
			.order_content_info_item_box_left{
				color: rgba(36, 40, 49, 1);
				font-size: 28rpx;
				margin-left: 20rpx;
			}
			.order_content_info_item_box_right{
				color: rgba(36, 40, 49, 1);
				font-size: 28rpx;
				display: flex;
				align-items: center;
				text{
					color: rgba(255, 107, 0, 1);
					font-weight: 600;
					font-size: 36rpx;
				}
				.order_content_info_item_box_right_copy{
					margin-left: 16rpx;
					width: 72rpx;
					height: 40rpx;
					text-align: center;
					line-height: 40rpx;
					color: rgba(36, 40, 49, 1);
					font-size: 24rpx;
					border-radius: 10rpx;
					border: 2rpx solid rgba(144, 147, 153, 1);
				}
			}
		}
		.scroll_item_order_remark_box{
			width: 624rpx;
			padding-top: 12rpx;
			padding-bottom: 12rpx;
			padding-left: 16rpx;
			padding-right: 16rpx;
			margin: 0 auto;
			margin-top: 24rpx;
			background-color: rgba(245, 246, 248, 1);
			font-size: 26rpx;
			color: rgba(96, 98, 102, 1);
			border-radius: 12rpx; 
			text{
				color: rgba(48, 49, 51, 1);
			}
		}
		.scroll_item_order_status_box{
			display: flex;
			align-items: center;
			margin-left: 62rpx;
			margin-top: 20rpx;
			.scroll_item_order_status{
				height: 48rpx;
				line-height: 48rpx;
				padding: 0 16rpx;
				border-radius: 6rpx;
				background-color: rgba(255, 107, 0, 1);
				color: #fff;
				font-size: 24rpx;
				margin-left: 20rpx;
			}
			.scroll_item_order_status1{
				background-color: rgba(3, 214, 214, 1);
			}
			.scroll_item_order_status2{
				background-color: rgba(0, 124, 239, 1);
			}
			.scroll_item_order_status3{
				background-color: rgba(44, 190, 118, 1);
			}
			.scroll_item_order_status_phone{
				height: 48rpx;
				line-height: 48rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 0 16rpx;
				color: rgba(36, 40, 49, 1);
				font-size: 28rpx;
				border: 2rpx solid rgba(228, 231, 237, 1);
				border-radius: 6rpx;
				text{
					color: rgba(255, 107, 0, 1);
				}
				image{
					width: 32rpx;
					height: 32rpx;
					margin-left: 14rpx;
				}
			}
		}
		.scroll_item_order_center_box{
			margin-top: 10rpx;
			.qu_address_item_box{
				display: flex; 
				justify-content: space-between;
				.dh_icon_box{
					width: 56rpx;
					height: 56rpx;
					// margin-right: 20rpx; 
					margin-top: 10rpx;
					image{
						width: 100%;
						height: 100%;
					}
				}
				.qu_address_item_left_box{
					display: flex; 
					.qu_address_icon_box{
						// margin-left: 20rpx;
						width: 46rpx;
						height: 36rpx;
						image{
							width: 46rpx;
							height: 36rpx;
						}
					}
					.qu_address_box{
						margin-left: 20rpx;
						.qu_address_title{
							color: rgba(36, 40, 49, 1);
							font-size: 36rpx;
							font-weight: 600;
							width: 454rpx;
							 text-overflow: -o-ellipsis-lastline;
							  overflow: hidden;
							  text-overflow: ellipsis;
							  display: -webkit-box;
							  -webkit-line-clamp: 4;
							  line-clamp: 4;
							  -webkit-box-orient: vertical;
						}
						.qu_address_desc{
							color: rgba(96, 98, 102, 1);
							font-size: 26rpx;
							width: 454rpx;
							white-space: nowrap;
							text-overflow: ellipsis;
							overflow: hidden;
							word-break: break-all;	
							margin-top: 6rpx;
						}
					}
				}
			}
			
			
		}
		
		.scroll_item_order_top_box{
			display: flex;
			align-items: center;
			justify-content: space-between; 
			.scroll_item_order_top_price{
				display: flex;
				align-items: center;
				// padding-right: 20rpx;
				.scroll_item_order_top_price_tip{
					color: rgba(144, 147, 153, 1);
					font-size: 26rpx;
					margin-right: 10rpx;
				}
				.scroll_item_order_top_price_num{
					color: rgba(255, 107, 0, 1);
					font-size: 44rpx;
					font-weight: 600;
					text{
						font-weight: 400;
						font-size: 28rpx;
						margin-right: 6rpx;
					}
				}
			}
			.scroll_item_order_top_time{
				display: flex;
				align-items: center;
				color: rgba(255, 107, 0, 1);
				font-size: 26rpx;
				// margin-left: 20rpx;
				image{
					width: 28rpx;
					height: 28rpx;
					margin-right: 8rpx;
				}
			}
		}
	}
	.kfPopup_content{
		width: 640rpx;
		height: 364rpx;
		background-image: url('https://www.cccshansong.com/chong_weapp/order_detail_icon5.png');
		background-size: 100% 100%;
		.kf_btn_title{
			text-align: center;
			font-size: 44rpx;
			padding: 36rpx 0;
			font-weight: 600;
		}
		.kf_btn_title1{
			text-align: center;
			font-size: 32rpx;
			font-weight: 600;
		}
		.kf_btn_box{
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 66rpx;
			.kf_btn1{
				width: 280rpx;
				height: 80rpx;
				text-align: center;
				line-height: 80rpx;
				color: rgba(255, 107, 0, 1);
				font-size: 30rpx;
				border-radius: 16rpx;
				border: 2rpx solid rgba(255, 107, 0, 1);
			}
			.kf_btn2{
				width: 280rpx;
				height: 80rpx;
				text-align: center;
				line-height: 80rpx;
				color: #fff;
				font-size: 30rpx;
				border-radius: 16rpx;
				border: 2rpx solid rgba(255, 107, 0, 1);
				background-color: rgba(255, 107, 0, 1);
				position: relative;
				margin-left: 30rpx;
				.leftBox{
					position: absolute;
					top: 0;
					left: 0;
					width: 280rpx;
					height: 80rpx;
					opacity: 0;
				}
			}
		}
	}
	.order_top_tip{
		position: absolute;
		left:88rpx;
		top: 0;
		z-index: 999;
		width: 458rpx;
		height: 40rpx;
		background-color: rgba(246, 233, 226, 1);
		border: 2rpx solid rgba(255, 107, 0, 0.1);
		border-radius: 10rpx;
		text-align: center;
		line-height: 40rpx;
		color: rgba(36, 40, 49, 1);
		font-size: 24rpx;
	}
	.fix_detail_box{
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 999997;
		width: 750rpx;
		padding-top: 16rpx;
		box-shadow: 0rpx 0rpx 26rpx 0rpx rgba(0,0,0,0.0800);
		padding-bottom: calc(16rpx +  constant(safe-area-inset-bottom));
		padding-bottom: calc(16rpx +  env(safe-area-inset-bottom));
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		.scroll_item_order_btn1{
			width: 228rpx;
			height: 88rpx;
			line-height: 88rpx;
			text-align: center;
			color: #fff;
			background-color: rgba(255, 168, 0, 1);
			border-radius: 12rpx;
			font-size: 32rpx;
			margin-right: 20rpx;
		}
		.scroll_item_order_btn2{
			width:454rpx;
			height: 88rpx;
			line-height: 88rpx;
			text-align: center;
			color: #fff;
			background-color: rgba(255, 107, 0, 1);
			border-radius: 12rpx;
			font-size: 32rpx;
		}
		.scroll_item_order_btn3{
			// height: 88rpx;
			// line-height: 88rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			padding: 0 16rpx;
			margin-right: 20rpx;
			text{
				color: rgba(36, 40, 49, 1);
				font-size: 24rpx;
			}
			image{
				width: 48rpx;
				height: 48rpx;
			}
		}
		.scroll_item_order_btn4{
			width: 464rpx;
			height: 88rpx;
			line-height: 88rpx;
			text-align: center;
			color: #fff;
			background-color:rgba(0, 117, 255, 1);
			border-radius: 12rpx;
			font-size: 32rpx;
			margin-left: 36rpx;
		}
		.scroll_item_order_btn5{
			width:574rpx;
			height: 88rpx; 
			line-height: 88rpx; 
			text-align: center;
			color: #fff;
			background-color:rgba(44, 190, 118, 1);
			border-radius: 12rpx;
			font-size: 32rpx;
			margin-left: 30rpx;
		}
	}	
</style>